<template>
  <div>
    <div class="tinymce-editor"><in-editor v-model="current_field" /></div>
  </div>
</template>
<script>
import InEditor from '@/components/ue-editor-wrap';
export default {
  components: {
    InEditor
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      current_field: this.value
    };
  },
  watch: {
    current_field(value) {
      this.$emit('update:value', value);
    },
    value: {
      handler(now, old) {
        this.current_field = now;
      }
    }
  },

  methods: {
    // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
    uploadImage: (blobInfo, success, failure) => {
      var xhr, formData;
      xhr = new XMLHttpRequest();
      xhr.withCredentials = false;
      xhr.open('POST', '/api/upload/putFile');

      xhr.onload = function() {
        var json;
        if (xhr.status != 200) {
          failure('HTTP Error: ' + xhr.status);
          return;
        }
        json = JSON.parse(xhr.responseText);
        if (!json || typeof json.data == 'undefined') {
          failure('Invalid JSON: ' + xhr.responseText);
          return;
        }
        success(json.data.fileurl);
      };

      formData = new FormData();
      formData.append('file', blobInfo.blob(), blobInfo.filename());

      xhr.send(formData);
    }
  }
};
</script>
<style lang="scss">
.tinymce-editor {
  margin-right: 20px;
  ::v-deep .tox-tinymce {
    width: 800px;
    height: 600px;
  }
}
// @import '/static/prism/prism.css';
</style>
